import React, { Fragment } from 'react'
import './index.less'
import Tabs from '../../components/Tabs';
import http from 'libs/http'
import { Icon } from 'antd'
import { NoData, MediaPlayer } from 'components'

export default class extends React.Component {
  state = {
    tabsData: [
      { courseType: 0, name: '全部课程', active: true },
      { courseType: 1, name: '龙英语', },
      { courseType: 3, name: '龙编程' },
    ],
    courseType: 0,
    materialList: [],
    mediaShow: false,
    mediaTitle: '',
    mediaSrc: '',
  }

  componentDidMount() {
    this.getMaterialsList()
  }

  // 获取课程资料列表
  getMaterialsList = () => {
    const { courseType } = this.state
    http.get('/student/materials/list', { courseType }).then(res => {
      this.setState({ materialList: res.data })
    })
  }

  // 全部课程、龙英语、龙编程之间切换
  changeTab = index => () => {
    const { tabsData } = this.state
    let courseType = 0
    tabsData.map((tab, i) => {
      if(index === i) {
        tab.active = true
        courseType = tab.courseType
      }else{
        tab.active = false
      }
    })
    this.setState({
      tabsData, courseType
    }, this.getMaterialsList)
  }

  lookMore = courseId => () => {
    this.props.history.push('/student_center/my_courses/layout/more_course_material/'+courseId)
  }

  handleClick = (fileName, name) => () => {
    this.setState({
      mediaShow: true,
      mediaTitle: name,
      mediaSrc: fileName
    })
  }

  // lookMaterial = (tableId, type) => () => {
  //   this.props.history.push(`/student_center_/material/${tableId}/${type}`)
  // }
  lookMaterial = (tableId, type) => () => {
    const winRef = window.open("", "_blank")
    setTimeout(() => {
      winRef.location = `/#/student_center_/material/${tableId}/${type}`
    }, 800);
  }
  onCancelMediaPlayer = () => {
    this.setState({ mediaShow: false, mediaSrc: '', mediaTitle: '' })
  }

  render() {
    const { tabsData, materialList, mediaTitle, mediaShow, mediaSrc } = this.state
    return (
      <div className="course-material">
        <Tabs tabsData={tabsData} changeTab={this.changeTab} fontColor="#fff"/>
        {
          materialList.length>0 ? (
            <div className="course-material-content">
              {
                materialList.map(material => {
                  const {
                    courseId,
                    courseName,
                    courseType, // 1-英语，3-编程
                    detailsOne=[], // 课程资料
                    detailsTwo=[], // 原声诵读
                    level, // 等级
                    levelStr,
                    pcPictureUrl, // pc图片地址
                    platformType, // 2-直播，3-录播
                  } = material
                  return (
                    <div className="material-item">
                      <div className="img">
                        <img src={pcPictureUrl} />
                        <i className={courseType === 1 ? 'english-icon' : (courseType === 3 ? 'program-icon' : '')}></i>
                      </div>
                      <div className="item-content">
                        <p className="course-name">
                          <span>{courseName}</span>
                          { level > 0 ? <span>课程等级：<b>{levelStr}</b></span> : <span><b></b></span> }
                        </p>
                        {
                          courseType === 1 ? (
                            <Fragment>
                              <div className="item1">
                                <b>课程资料</b>
                                <ul>
                                  {
                                    detailsOne.map((one, index) => {
                                      const {
                                        code, // 教材编码
                                        courseId, // 课程id
                                        courseName, // 课程的名称
                                        createTime, // 创建时间
                                        fileName, // 文件名称
                                        firstId, // 一级分类的Id
                                        firstName, // 一级分类的名称
                                        hour, // 课时
                                        id, // 
                                        level, // 级别
                                        name, // 教材名称
                                        secondId, // 二级分类的Id
                                        secondName, // 二级分类的名称
                                        template, // 教材模版
                                        thirdId, // 三级分类的id
                                        thirdName, // 三级分类的名称
                                        type, // 1-课程教材/预习资料,2-原声诵读,3-素材下载,4-录播视频
                                        updateTime, // 更新时间
                                        version, // 版本号
                                      } = one
                                      if(index < 3) {
                                        return (
                                          <li onClick={this.lookMaterial(id, 1)}><Icon type="play-circle" /> <span>Lesson {hour}</span></li>
                                        )
                                      }
                                    })
                                  }
                                  <li className="btn" onClick={this.lookMore(courseId)}><span>查看更多</span></li>
                                </ul>
                              </div>
                              <div className="item1">
                                <b>原声诵读</b>
                                <ul>
                                  {
                                    detailsTwo.map((two, index) => {
                                      const {
                                        code, // 教材编码
                                        courseId, // 课程id
                                        courseName, // 课程的名称
                                        createTime, // 创建时间
                                        fileName, // 文件名称
                                        firstId, // 一级分类的Id
                                        firstName, // 一级分类的名称
                                        hour, // 课时
                                        id, // 
                                        level, // 级别
                                        name, // 教材名称
                                        secondId, // 二级分类的Id
                                        secondName, // 二级分类的名称
                                        template, // 教材模版
                                        thirdId, // 三级分类的id
                                        thirdName, // 三级分类的名称
                                        type, // 1-课程教材/预习资料,2-原声诵读,3-素材下载,4-录播视频
                                        updateTime, // 更新时间
                                        version, // 版本号
                                      } = two
                                      if(index < 3) {
                                        return (
                                          <li onClick={this.handleClick(fileName, name)}><Icon type="play-circle" /> <span>Lesson {hour}</span></li>
                                        )
                                      }
                                    })
                                  }
                                  <li className="btn" onClick={this.lookMore(courseId)}><span>查看更多</span></li>
                                </ul>
                              </div>
                            </Fragment>
                          ) : (
                            <Fragment>
                              <div className="item1">
                                <b>课程资料</b>
                                <ul>
                                  {
                                    detailsOne.map((one, index) => {
                                      const {
                                        code, // 教材编码
                                        courseId, // 课程id
                                        courseName, // 课程的名称
                                        hour, // 课时
                                        id, // 
                                      } = one
                                      if(index < 3) {
                                        return (
                                          <li onClick={this.lookMaterial(id, 1)}><Icon type="play-circle" /> <span>Lesson {hour}</span></li>
                                        )
                                      }
                                    })
                                  }
                                  <li className="btn" onClick={this.lookMore(courseId)}><span>查看更多</span></li>
                                </ul>
                              </div>
                              <div className="item1">
                                <b>课程视频</b>
                                <ul>
                                  {
                                    detailsTwo.map((two, index) => {
                                      if(index < 4) {
                                        const {
                                          name, hour, fileName
                                        } = two
                                        return (
                                          <li onClick={this.handleClick(fileName, name)}><Icon type="play-circle" /> <span>Lesson {hour}</span></li>
                                        )
                                      }
                                    })
                                  }
                                  <li className="btn" onClick={this.lookMore(courseId)}><span>查看更多</span></li>
                                </ul>
                              </div>
                              {/* <div className="item1">
                                <b></b>
                                <ul>
                                  {
                                    detailsTwo.map((two, index) => {
                                      if(index > 3 && index < 7) {
                                        const {
                                          name, hour
                                        } = two
                                        return (
                                          <li><Icon type="play-circle" /> <span>Lesson {hour}</span></li>
                                        )
                                      }
                                    })
                                  }
                                  <li className="btn" onClick={this.lookMore(courseId)}><span>查看更多</span></li>
                                </ul>
                              </div> */}
                            </Fragment>
                          )
                        }
                      </div>
                    </div>
                  )
                })
              }
            </div>
          ) : <NoData />
        }
        <MediaPlayer
          src={mediaSrc}
          title={mediaTitle}
          show={mediaShow}
          onCancel={this.onCancelMediaPlayer}
        />
      </div>
    )
  }
}